<template>
  <div class="map-view">
      <div id="main"></div>
  </div>
</template>

<script>
import geoJson from '@/assets/data.json'

export default {
  data() {
    return {
      
    }
  },
  mounted() {
    let myChart = this.$echarts.init(document.getElementById('main'))
        this.$echarts.registerMap('china', geoJson) // 注册可用的地图,必须包括geo组件或者map图表类型的时候才可以使用
        console.log(geoJson)
        let option = {
            backgroundColor: 'rgb(121, 145, 209)',
            geo: { //地理坐标系组件
                map: 'china',
                aspectScale: 0.75, // scale地图长宽比
                zoom: 1.1,
                itemStyle: {
                    normal: {
                        areaColor: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#09132c' // 0%处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#274d68' // 100%处的颜色
                                }
                            ],
                            globalCoord: true
                        },
                        shadowColor: 'rgb(58, 115, 192)',
                        shadowOffsetX: 10,
                        shadowOffsetY: 11
                    }
                },
                regions: [{
                    name: '南海诸岛',
                    itemStyle: {
                        opacity: 0
                    }
                }]
            },
            series: [
                { // 配置地图相关参数,绘制地图,这个对象是关于地图图表的相关设置
                    type: 'map',
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#1DE9B6'
                            }
                        },
                        emphasis: {
                            textStyle: {
                                color: 'rgb(183, 185, 14)'
                            }
                        }
                    },
                    zoom: 1.1,
                    map: 'china',
                    itemStyle: {
                        normal: {
                            backgroundColor: 'rgb(147, 235, 248)',
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgb(31, 54, 150)' // 0%处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(89, 128, 142)' // 100%处的颜色
                                    }
                                ],
                                globalCoord: true
                            }
                        },
                        emphasis: {
                            areaColor: 'rgb(46, 229, 206)',
                            borderWidth: 0.1
                        }
                    },
                }
            ]
        }
        myChart.setOption(option)
  }
}
</script>

<style lang="scss">
.map-view{
  width: 100%;
  #main{
    width: 100%;
    height: 600px;
  }
}
</style>